<template>
    <div class="loginBg">
          <div class="wt">
                <div class="txtCenter font30 pb30">注册小米帐号</div>
                <div class="ht">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" label-width="100px" class="login-ruleForm">
                        <el-form-item label="国家地区" prop="area">
                            <el-select v-model="ruleForm.area" placeholder="请选择">
                                <el-option v-for="item in contrys" :key="item.value" :label="item.num +' '+ item.label" :value="item.value">
                                    <span style="float: left">{{ item.label }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.num }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="phone">
                            <el-input v-model="ruleForm.phone"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即注册</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="xieyi">已阅读并同意：小米<a @click="box1">《用户协议》</a>和<a  @click="box2">《隐私政策》</a></div>
                </div>
          </div>
          <el-dialog  title="用户协议" :visible.sync="box1Show"  width="600px">
            <div class="tipsHeight">
                小米帐号使用协议<br/>
                欢迎您注册、使用小米帐号！<br/>
                本协议系您与小米科技有限责任公司就小米帐号的注册和使用而订立的。小米科技有限责任公司（如下简称“小米”）在此特别提醒您认真阅读、充分理解本协议各条款，特别是涉及服务费用条款，免除或者限制小米责任的条款，对您的权利限制条款，争议解决和法律适用条款等，此类条款将以加粗的形式提示您注意。请您审慎阅读并选择接受或不接受本协议（限制民事行为能力人应在监护人或法定代理人陪同下阅读）。除非您接受本协议所有条款，否则您无权注册、使用小米帐号。您的注册和使用小米帐号行为将视为您已充分理解本协议（即本协议及后续更新版本或开通或使用某项服务的单项协议），并同意接受本协议各项条款的约束。
                <br/>
                一、 关于小米帐号<br/>
                1．小米帐号系由小米所有的用于识别您身份的标识。帐号的所有权属于小米，您作为初始申请注册人仅拥有您所注册帐号的使用权。
                <br/>
                2．您可通过小米帐号享受小米及关联公司提供的单项服务包括但不限于小米网、应用商店、米家有品、云服务、主题商店、lot平台等服务，您亦可通过小米帐号向小米购买米币以便您享受小米及关联公司的各种虚拟产品和增值服务（如游戏、主题、电子书等）。
                <br/>
                3. 本服务条款的效力范围及于小米及关联公司的一切产品和服务，您在享受任何单项服务时，应当受本服务条款的约束。当您使用小米各单项服务时，您同意以单项服务要求的方式同意该单项服务的服务条款包括但不限于《小米网用户协议》、《小米生活用户协议》、《MIOT平台服务协议》以及小米在该单项服务中发出的各类公告（下列简称为“单项条款”），在此情况下单项条款与本服务条款同时对您产生效力。若单项条款与本服务条款存在同类条款的冲突，则在单项条款约束范围内应以单项条款为准。
                <br/>
                二、帐号使用规则<br/>
                1．注册帐号<br/>
                1.1 您确认，在您开始注册程序使用小米服务前，您应当具备中华人民共和国法律规定的与您行为相适应的民事行为能力。若您不具备前述与您行为相适应的民事行为能力，则您及您的监护人应依照法律规定承担因此而导致的一切后果。
                <br/>
                1.2 您应提供及时、详尽及准确的个人资料，并不断更新注册资料，符合及时、详尽、准确的要求。您保证在注册时所提交的所有资料（包括但不限于手机号码、邮箱等）真实、准确、合法、有效且系您本人的资料。如果因注册信息不真实或更新不及时而引发的相关问题， 小米不负任何责任。您可以通过小米帐号设置页面查询、更正您的信息，您应当通过真实身份信息认证注册帐号，且您提交的帐号名称、头像和简介等注册信息中不得出现违法和不良信息，经小米审核，如存在上述情况，小米将不予注册；同时，在注册后，如发现您以虚假信息骗取帐号名称注册，或您的帐号头像、简介等注册信息存在违法和不良信息的，小米有权不经通知单方采取限期改正、暂停使用、终止帐号等措施。当您按照注册页面提示填写信息、阅读并同意本协议条款且完成全部注册程序后，您可获得小米帐号并成为小米用户。
                <br/>
                2.帐号使用<br/>
                2.1 您应对您帐号项下的所有行为结果（包括但不限于在线签署各类单项条款、发布信息、购买商品及服务及披露信息等）负责。
                <br/>
                2.2 由于您的小米帐号关联您的个人信息及小米商业信息，您的小米帐号仅限您本人使用。未经小米同意，您直接或间接授权第三方使用您小米帐号或获取您帐号项下信息的行为无效。如小米根据小米各平台规则中约定的违约认定程序及标准判断您小米帐号的使用可能危及您的帐号安全及或小米信息安全的，小米可拒绝提供相应服务或终止本协议。
                <br/>
                2.3 若您选择第三方帐号登陆小米的服务，第三方帐号将与您的小米帐号相关联，小米将根据您授权第三方提供的信息而使用您的信息（如头像）。您后续使用该小米帐号的行为受本协议约束。
                <br/>
                3.帐号保管和找回<br/>
                3.1 小米帐号包括帐号名称和密码，您可使用设置的帐号名称（包括帐号ID、手机号）和密码登录，您应妥善保管好您的帐号及密码，定期修改密码，因您个人原因导致的帐号信息遗失，如需找回小米帐号信息，请按照小米帐号找回流程提供相应的信息，并确保提供的信息合法真实有效，若提供的信息不符合要求，无法通过小米安全验证，小米有权拒绝提供帐号找回服务；
                <br/>
                3.2 如果您当前使用的小米帐号并非您初始申请注册的或通过小米提供的其他途径获得的，但您却知悉该小米帐号当前的密码，您不得用该小米帐号登录或进行任何操作，并请您在第一时间通知小米或者该小米帐号的初始申请注册人。
                <br/>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="box1Show = false">关闭</el-button>
            </span>
        </el-dialog>
        <el-dialog  title="隐私政策" :visible.sync="box2Show"  width="600px">
            <div class="tipsHeight">
                小米帐号隐私政策<br/>
                欢迎您注册、使用小米帐号！<br/>
                本协议系您与小米科技有限责任公司就小米帐号的注册和使用而订立的。小米科技有限责任公司（如下简称“小米”）在此特别提醒您认真阅读、充分理解本协议各条款，特别是涉及服务费用条款，免除或者限制小米责任的条款，对您的权利限制条款，争议解决和法律适用条款等，此类条款将以加粗的形式提示您注意。请您审慎阅读并选择接受或不接受本协议（限制民事行为能力人应在监护人或法定代理人陪同下阅读）。除非您接受本协议所有条款，否则您无权注册、使用小米帐号。您的注册和使用小米帐号行为将视为您已充分理解本协议（即本协议及后续更新版本或开通或使用某项服务的单项协议），并同意接受本协议各项条款的约束。
                <br/>
                一、 关于小米帐号<br/>
                1．小米帐号系由小米所有的用于识别您身份的标识。帐号的所有权属于小米，您作为初始申请注册人仅拥有您所注册帐号的使用权。
                <br/>
                2．您可通过小米帐号享受小米及关联公司提供的单项服务包括但不限于小米网、应用商店、米家有品、云服务、主题商店、lot平台等服务，您亦可通过小米帐号向小米购买米币以便您享受小米及关联公司的各种虚拟产品和增值服务（如游戏、主题、电子书等）。
                <br/>
                3. 本服务条款的效力范围及于小米及关联公司的一切产品和服务，您在享受任何单项服务时，应当受本服务条款的约束。当您使用小米各单项服务时，您同意以单项服务要求的方式同意该单项服务的服务条款包括但不限于《小米网用户协议》、《小米生活用户协议》、《MIOT平台服务协议》以及小米在该单项服务中发出的各类公告（下列简称为“单项条款”），在此情况下单项条款与本服务条款同时对您产生效力。若单项条款与本服务条款存在同类条款的冲突，则在单项条款约束范围内应以单项条款为准。
                <br/>
                二、帐号使用规则<br/>
                1．注册帐号<br/>
                1.1 您确认，在您开始注册程序使用小米服务前，您应当具备中华人民共和国法律规定的与您行为相适应的民事行为能力。若您不具备前述与您行为相适应的民事行为能力，则您及您的监护人应依照法律规定承担因此而导致的一切后果。
                <br/>
                1.2 您应提供及时、详尽及准确的个人资料，并不断更新注册资料，符合及时、详尽、准确的要求。您保证在注册时所提交的所有资料（包括但不限于手机号码、邮箱等）真实、准确、合法、有效且系您本人的资料。如果因注册信息不真实或更新不及时而引发的相关问题， 小米不负任何责任。您可以通过小米帐号设置页面查询、更正您的信息，您应当通过真实身份信息认证注册帐号，且您提交的帐号名称、头像和简介等注册信息中不得出现违法和不良信息，经小米审核，如存在上述情况，小米将不予注册；同时，在注册后，如发现您以虚假信息骗取帐号名称注册，或您的帐号头像、简介等注册信息存在违法和不良信息的，小米有权不经通知单方采取限期改正、暂停使用、终止帐号等措施。当您按照注册页面提示填写信息、阅读并同意本协议条款且完成全部注册程序后，您可获得小米帐号并成为小米用户。
                <br/>
                2.帐号使用<br/>
                2.1 您应对您帐号项下的所有行为结果（包括但不限于在线签署各类单项条款、发布信息、购买商品及服务及披露信息等）负责。
                <br/>
                2.2 由于您的小米帐号关联您的个人信息及小米商业信息，您的小米帐号仅限您本人使用。未经小米同意，您直接或间接授权第三方使用您小米帐号或获取您帐号项下信息的行为无效。如小米根据小米各平台规则中约定的违约认定程序及标准判断您小米帐号的使用可能危及您的帐号安全及或小米信息安全的，小米可拒绝提供相应服务或终止本协议。
                <br/>
                2.3 若您选择第三方帐号登陆小米的服务，第三方帐号将与您的小米帐号相关联，小米将根据您授权第三方提供的信息而使用您的信息（如头像）。您后续使用该小米帐号的行为受本协议约束。
                <br/>
                3.帐号保管和找回<br/>
                3.1 小米帐号包括帐号名称和密码，您可使用设置的帐号名称（包括帐号ID、手机号）和密码登录，您应妥善保管好您的帐号及密码，定期修改密码，因您个人原因导致的帐号信息遗失，如需找回小米帐号信息，请按照小米帐号找回流程提供相应的信息，并确保提供的信息合法真实有效，若提供的信息不符合要求，无法通过小米安全验证，小米有权拒绝提供帐号找回服务；
                <br/>
                3.2 如果您当前使用的小米帐号并非您初始申请注册的或通过小米提供的其他途径获得的，但您却知悉该小米帐号当前的密码，您不得用该小米帐号登录或进行任何操作，并请您在第一时间通知小米或者该小米帐号的初始申请注册人。
                <br/>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="box2Show = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
  data () {
    return {
      contrys: [
        { value: 1, label: '中国', num: '+86' },
        { value: 2, label: '亚美尼亚', num: '+374' },
        { value: 3, label: '美国', num: '+1' },
        { value: 4, label: '阿富汗', num: '+93' }
      ],
      box1Show: false,
      box2Show: false,
      ruleForm: {
        area: 1,
        phone: ''
      },
      rules: {
        area: [
          { required: true, message: '请选择国家地区', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    box1 () {
      this.box1Show = true
    },
    box2 () {
      this.box2Show = true
    }
  }
}
</script>

<style scoped lang="scss">
  .loginBg{
     height: calc(100vh - 180px);
     padding-top: 40px;
     background: #f5f5f5;
    .wt{
       width: 880px;
       padding:3% 0 4% 0;
       background: #fff;
       margin: auto;
       .el-button{
         display: block;
         padding: 0;
         line-height: 44px;
         border-radius: 0;
         width: 100%;
         margin-top:20px;
      }
    }
    .ht{
      width: 330px;
      margin: auto;
    }
    .el-select{
      display: block;
    }
  }
  .xieyi{
    text-align: center;
    padding-top: 80px;
  }
  .tipsHeight{
    max-height: calc(100vh - 420px);
    overflow-y: auto;
    background: #f5f5f5;
    padding: 15px 20px;
    line-height: 1.7;
  }
  .loginBg /deep/ .el-form--label-top .el-form-item__label{padding-bottom:0}
  .loginBg /deep/ .el-input__inner{border-radius: 0;}
  .loginBg /deep/ .el-form-item__error{padding-top: 7px;}
  .el-dialog__wrapper /deep/ .el-dialog__body{ padding-top: 0;}
  .loginBg /deep/{
      +footer{display: none;}
  }
</style>
